<template>
    <div class="content">
        <div class="collapse-header">
            <div class="collapse-title">
                {{ schoolName }}
                <div class="collapse-title-tools" @click.stop>
                    <Button size="small" type="primary" @click="addDepartment">添加院系</Button>
                </div>
            </div>
        </div>
        <Collapse>
            <Panel v-for="item in colleges" :key="item.collegeId" :name="item.collegeId">
                <div class="collapse-title">
                    {{item.collegeName}}
                    <div class="collapse-title-tools" @click.stop>
                        <Button size="small" type="primary" @click="addProfessional(item.collegeId)">添加专业</Button>
                        <Button size="small" type="primary" @click="editDepartment(item)">编辑</Button>
                        <Button size="small" @click="delDepartment(item)">删除</Button>
                    </div>
                </div>
                <div slot="content">
                    <div class="collapse-children" v-for="val in item.major" :key="val.majorId">
                        <div class="collapse-title">
                            {{ val.majorName }}
                            <div class="collapse-title-tools" @click.stop>
                                <Button size="small" type="primary" @click="editProfessional(item.collegeId, val)">编辑</Button>
                                <Button size="small" @click="delProfessional(item.collegeId, val)">删除</Button>
                            </div>
                        </div>
                    </div>
                    <div v-if="item.major.length === 0" class="collapse-children">无专业</div>
                </div>
            </Panel>
        </Collapse>
        <Modal
            v-model="modal.visible"
            :title="modal.title"
            width="500"
        >
            <Form ref="form" :model="form" :rules="rules" @submit.native.prevent>
                <FormItem prop="value">
                    <Input v-model="form.value" />
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="primary" @click="submit">保存</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
import { delCollege, saveCollege, saveMajor, delMajor, majorList } from '@/api/schoolManage'

export default {
    data () {
        return {
            modal: {
                visible: false,
                title: ''
            },
            form: {
                type: '', // 1 院系 2 专业
                value: '',
                id: '',
                collegeId: '',
                majorId: ''
            },
            rules: {
                value: [
                    { required: true, message: '此项必填', trigger: 'blur,change' }
                ]
            },
            colleges: [],
            schoolName: ''
        }
    },
    mounted () {
        this.queryInfo()
    },
    methods: {
        queryInfo () {
            majorList().then(res => {
                if (res.data.code === '0000') {
                    const { schoolName, collegeList } = res.data.data
                    this.colleges = collegeList
                    this.schoolName = schoolName
                } else {
                    this.$Message.error(res.data.data)
                }
            })
        },
        openModal (data, type, title) {
            this.$refs.form.resetFields()
            const { majorId = '', collegeId = '', value = '' } = data
            this.form.type = type
            this.form.collegeId = collegeId
            this.form.majorId = majorId
            this.form.value = value
            this.modal.title = title
            this.modal.visible = true
        },
        addDepartment () {
            this.openModal({}, 1, '添加院系')
        },
        editDepartment (item) {
            this.openModal({
                collegeId: item.collegeId,
                value: item.collegeName
            }, 1, '编辑院系')
        },
        delDepartment ({ collegeId }) {
            this.$Modal.confirm({
                title: '提示',
                content: '确认删除当前院系吗？',
                onOk: () => {
                    delCollege(collegeId).then(res => {
                        if (res.data.code === '0000') {
                            const i = this.colleges.findIndex(item => item.collegeId === collegeId)
                            i >= 0 && this.colleges.splice(i, 1)
                            this.$Message.success('删除成功')
                        } else {
                            this.$Message.error(res.data.data)
                        }
                    })
                }
            })
        },
        updateCollege (data) {
            const { collegeId, collegeName } = data
            const i = this.colleges.findIndex(item => item.collegeId === collegeId)
            if (i < 0) {
                this.colleges.push({
                    collegeId,
                    collegeName,
                    major: []
                })
            } else {
                this.colleges[i].collegeId = collegeId
                this.colleges[i].collegeName = collegeName
            }
        },
        saveCollege () {
            const data = {
                collegeId: this.form.collegeId,
                collegeName: this.form.value
            }
            return saveCollege(data).then(res => {
                if (res.data.code === '0000') {
                    this.updateCollege({
                        ...data,
                        collegeId: res.data.data
                    })
                } else {
                    this.$Message.error(res.data.data)
                }
            })
        },
        // 更新院系包含的专业
        updateMajor ({ collegeId, majorId, majorName }) {
            const college = this.colleges.find(item => item.collegeId === collegeId)
            if (college) {
                const major = college.major
                const i = major.findIndex(item => item.majorId === majorId)
                if (i < 0) {
                    major.push({
                        majorId,
                        majorName
                    })
                } else {
                    major[i].majorId = majorId
                    major[i].majorName = majorName
                }
            }
        },
        addProfessional (collegeId) {
            this.openModal({ collegeId }, 2, '添加专业')
        },
        editProfessional (collegeId, item) {
            this.openModal(
                { collegeId,
                    majorId: item.majorId,
                    value: item.majorName
                },
                2,
                '编辑院系'
            )
        },
        delProfessional (collegeId, { majorId }) {
            this.$Modal.confirm({
                title: '提示',
                content: '确认删除当前专业吗？',
                onOk: () => {
                    delMajor(majorId).then(res => {
                        if (res.data.code === '0000') {
                            const college = this.colleges.find(item => item.collegeId === collegeId)
                            if (college) {
                                const i = college.major.findIndex(item => item.majorId === majorId)
                                i >= 0 && college.major.splice(i, 1)
                            }
                            this.$Message.success('删除成功')
                        } else {
                            this.$Message.error(res.data.data)
                        }
                    })
                }
            })
        },
        saveMajor () {
            const data = {
                majorId: this.form.majorId,
                collegeId: this.form.collegeId,
                majorName: this.form.value
            }
            return saveMajor(data).then(res => {
                if (res.data.code === '0000') {
                    this.updateMajor({
                        ...data,
                        majorId: res.data.msg
                    })
                    this.$Message.success('操作成功')
                } else {
                    this.$Message.error(res.data.data)
                }
            })
        },
        submit () {
            this.$refs.form.validate(v => {
                if (v) {
                    const fn = this.form.type === 1 ? this.saveCollege : this.saveMajor
                    fn.call(this).then(() => {
                        this.modal.visible = false
                    }).catch(err => {
                        this.modal.visible = false
                    })
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.collapse-header,
.collapse-children {
    line-height: 38px;
    height: 38px;
    position: relative;
}
.collapse-header {
    font-size: 16px;
}
.collapse-title {
    display: inline-block;
    &-tools {
        position: absolute;
        top: 0;
        right: 10px;
        button + button {
            margin-left: 8px;
        }
    }
}
.collapse-children + .collapse-children{
    border-top: 1px solid #DADDDF;
}
.ivu-collapse {
     /deep/ .ivu-collapse-content-box {
        padding: 0 0 0 30px;
    }
     /deep/ .ivu-collapse-content {
        padding-right: 0;
    }
}

</style>
